<template>
    <div>
        <el-card style="margin: 10px 5px; height:min-content">
            <div style="align-items: center; text-align: left; font-weight: bolder; font-size: large;">发布文章</div>
            <div style="display: flex;">
                <el-input style="width: 900px; margin: 10px 0;" v-model="novel.title" placeholder="请输入标题"></el-input>
                <span style=" align-items: end; margin-left: auto;">
                    <el-button style="margin: 10px 5px; width: 125px;" plain type="warning"
                        size="medium">保存草稿</el-button>
                    <el-button style="margin: 10px; width: 125px;" plain type="primary" size="medium"
                        @click="publish">发布文章</el-button>
                </span>
            </div>
            <MdEditor :content="content" @update:content="getEditorContent"/>
        </el-card>
        <el-dialog title="发布文章" :visible.sync="dialogVisible" width="35%" hei>
            <el-form :model="form" label-width="80px" style="padding-right: 20px;" :rules="rules" ref="formRef">
                <el-form-Item label="文章标签">
                    <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false"
                        @close="handleClose(tag)">
                        {{ tag }}
                    </el-tag>
                    <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput"
                        size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
                    </el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
                </el-form-Item>
                <el-form-Item label="文章类型">
                    <el-select v-model="value" clearable placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-Item>

                <el-form-Item label="上传封面">
                    <el-upload class="upload-demo" :action="$baseUrl+'/upload'" :headers="{token:user.token}"
                        :show-file-list="false" drag :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="background" :src="background" class="avatar">
                        <i v-else class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-Item>
                <el-form-Item label="推荐">
                    <el-switch v-model="recommend" active-color="#13ce66" inactive-color="gray">
                    </el-switch>
                </el-form-Item>
                <el-form-Item label="top">
                    <el-switch v-model="top" active-color="#13ce66" inactive-color="gray">
                    </el-switch>
                </el-form-Item>
                <el-form-Item label="发布形式">
                    <template >
                        <el-radio v-model="radio" label='1'>公开</el-radio>
                        <el-radio v-model="radio" label='2'>私密</el-radio>
                    </template>
                </el-form-Item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>


        </el-dialog>
    </div>
</template>

<script>
import MdEditor from '@/components/VMDEditor.vue'
export default {
    name: "novelView",
    components: {
        MdEditor,
     },
    data() {
        return {
            editor: null,
            novel: {},
            dialogVisible: false,
            dynamicTags: ['springboot','vue','docker'],
            inputVisible: false,
            inputValue: '',
            recommend:true,
            top:true,
            background:'',
            user:JSON.parse(localStorage.getItem('user'||'{}')),
            radio: '1',
            content:'',


            options: [{
                value: '选项1',
                label: '类型一'
            }, {
                value: '选项2',
                label: '类型二'
            }, {
                value: '选项3',
                label: '类型三'
            },],
            value: '',
        }
    },
    mounted() {
        
    },

    methods: {
        publish() {
            this.dialogVisible = true
        },
        save() {
            this.novel.image=this.background
            this.novel.type=this.value
           /*  this.novel.content=this.editor.txt.html() */
           this.novel.content=this.content
            this.novel.permission=this.radio
            this.novel.recommend=this.recommend
            if(!this.novel.content){
                this.$message.error('请输入内容')
                return
            }
            if(!this.novel.title){
                this.$message.error('请输入标题')
                return
            }
            this.$request.post('/novel/add',this.novel).then(res=>{
                if(res.code=='1'){
                    this.$message.success('发送成功')
                    this.dialogVisible=false
                }
                else{
                    this.$message.error('发送失败')
                }
            })
        },
        handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
         },
         getEditorContent(content){
            this.content=content
         },
      showInput() {
        this.inputVisible = true;
        this.$nextTick(() => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },
      handleAvatarSuccess(response,file,fileList) {
            console.log("1");
            console.log(response,file,fileList);
            this.background=response.data;
         },
         beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'||'Image/png';

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG或 png 格式!');
        }
    }
    }

}

</script>

<style>
.w-e-toolbar {
    z-index: 2 !important;
}

.w-e-menu {
    z-index: 2 !important;
}

.w-e-text-container {
    z-index: 1 !important;
}

.el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 28px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .el-upload-dragger img{
    max-width: 100%;
    max-height: 100%;
    
  }
  .el-upload-dragger {
    width: 290px;
    height: 150px;
  }
  
</style>